
import { Input, Radio } from "antd"
import lessModule from "./index.module.less"
import searchImage from "../../../../../../../../../../assets/image/homePage-search.png"
import { ChangeEvent, Fragment, useEffect, useState } from "react"
import { RadioChangeEvent } from "antd/lib"
import { $eventBus, $JudgePortableDevice } from "../../../../../../../../../../common/utils"
// 主页-调试测试页面-便携设备接入页面-编辑弹窗组件-选择站点组件-单选面板组件
interface homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentRadioPanelComponentInterface {
    type: string
}
const HomePage_DebuggingAndTestingPage_PortableDeviceAccessPage_SelectSubstationComponent_RadioPanelComponent: React.FC<homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentRadioPanelComponentInterface> = (props) => {
    const [searchTextList, setSearchTextList] = useState<Array<Array<string>>>([[], []])
    const [substationNameList, setSubstationNameList] = useState<Array<Array<string>>>([[], []])
    const [infoCardStatusList, setInfoCardStatusList] = useState<Array<string>>(["success", "success"])

    const substationList = [
        {
            name: "巡回中心0",
            children: [
                {
                    name: "站点000000000000000000000000000",

                },
                {
                    name: "站点1",

                },
                {
                    name: "站点2",

                },
                {
                    name: "站点3",

                },
                {
                    name: "站点4",

                },
                {
                    name: "站点5",

                },
            ]
        },
        {
            name: "巡回中心1",
            children: [
                {
                    name: "站点0",

                }
            ]
        }
    ]

    const change_search = (data: ChangeEvent, idx: number) => {
        searchTextList[$JudgePortableDevice(props.type, 0, 1)][idx] = data["target"]["value"]
        setSearchTextList([...searchTextList])
    }

    const change_substationName = (idx: number, value: string) => {
        substationNameList[$JudgePortableDevice(props.type, 0, 1)][idx] = value
        setSubstationNameList([...substationNameList])
        setTimeout(() => {
            $eventBus.emit("homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentRadioPanelComponent_data", { substationNameList: substationNameList[$JudgePortableDevice(props.type, 0, 1)], infoCardStatus: infoCardStatusList[$JudgePortableDevice(props.type, 0, 1)] })
        });
    }

    return (
        <div className={lessModule["homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentRadioPanelComponent"]}>
            {
                Array.from({ length: $JudgePortableDevice(props.type, 1, 2) }, (_, i) => i + 1).map((item, idx) => (
                    <div key={`cardItem${idx}`} className={lessModule["homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentRadioPanelComponent-group"]} style={{ width: $JudgePortableDevice(props.type, "100%", "calc((100% - 31px) / 2)") }}>
                        {
                            substationList.map((substationItem, substationIdx) => (
                                <Fragment key={`substationItem${substationIdx}`}>
                                    {
                                        $JudgePortableDevice(props.type, null, !substationIdx && <div className={`${lessModule["homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentRadioPanelComponent-group__title"]} ${lessModule["homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentRadioPanelComponent-group__substation"]}`}>站点{idx + 1}</div>)
                                    }
                                    <div className={lessModule["homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentRadioPanelComponent-group__title"]}>
                                        <span>{substationItem["name"]}</span>
                                        {
                                            !substationIdx && <Input placeholder="请输入搜索关键字" style={{ width: $JudgePortableDevice(props.type, 330, 200) }} value={searchTextList[$JudgePortableDevice(props.type, 0, 1)][idx]} autoComplete="off" suffix={<img src={searchImage} />} onChange={(e) => change_search(e, idx)} />
                                        }
                                    </div>
                                    <div className={lessModule["homePageDebuggingAndTestingPagePortableDeviceAccessPageSelectSubstationComponentRadioPanelComponent-group__content"]}>
                                        {
                                            substationItem["children"].map((_, substationItemChildrenIdx) => (
                                                <Fragment key={`substationItemChildrenItem${substationItemChildrenIdx}`}>
                                                    {
                                                        substationItemChildrenIdx % ($JudgePortableDevice(props.type, 3, 2)) === 0 && <div className={lessModule["group-content__row"]}>
                                                            {
                                                                Array.from({ length: $JudgePortableDevice(props.type, 3, 2) }, (_, i) => substationItemChildrenIdx + i).map((substationItemChildrenItemItem) => (
                                                                    substationItem["children"].length > substationItemChildrenItemItem && <div key={`substationItemChildrenItemItem${substationItemChildrenItemItem}`} className={lessModule["content-row__group"]} style={{
                                                                        width: $JudgePortableDevice(props.type, 160, 140),
                                                                        paddingRight: $JudgePortableDevice(props.type, 31, 11),
                                                                        backgroundColor: substationNameList?.[$JudgePortableDevice(props.type, 0, 1)]?.[idx] === substationItem["children"]?.[substationItemChildrenItemItem]?.["name"] ? "#E6F7FF" : "#FFFFFF"
                                                                    }}>
                                                                        {
                                                                            <Radio
                                                                                disabled={props.type.includes("线路") && substationNameList?.[1]?.[idx ? (idx - 1) : (idx + 1)] === substationItem["children"]?.[substationItemChildrenItemItem]?.["name"]}
                                                                                checked={substationNameList?.[$JudgePortableDevice(props.type, 0, 1)]?.[idx] === substationItem["children"]?.[substationItemChildrenItemItem]?.["name"]}
                                                                                onChange={() => change_substationName(idx, substationItem["children"]?.[substationItemChildrenItemItem]?.["name"])}>
                                                                                {substationItem["children"]?.[substationItemChildrenItemItem]?.["name"]}</Radio>
                                                                        }
                                                                    </div>
                                                                ))
                                                            }
                                                        </div> 
                                                    }
                                                </Fragment>
                                            ))
                                        }
                                    </div>
                                </Fragment>
                            ))
                        }
                    </div>
                ))
            }
        </div>
    )
}

export default HomePage_DebuggingAndTestingPage_PortableDeviceAccessPage_SelectSubstationComponent_RadioPanelComponent